import { lazy } from "react";

const Home = lazy(() => import("../pages/Home"));
const Login = lazy(() => import("../pages/Login"));
const Dashboard = lazy(() => import("../pages/Dashboard"));
const Profile = lazy(() => import("../pages/Profile"));
const Settings = lazy(() => import("../pages/Settings"));
const NotFound = lazy(() => import("../pages/NotFound"));

const routes = [
  {
    path: "/login",
    element: <Login />,
    requiresAuth: false,
  },
  {
    path: "/",
    element: <Home />,
    requiresAuth: true,
    // loader: async () => {
    //   const res = await fetch("/api/home-data");
    //   if (!res.ok) throw new Errow("Failed to load home data");
    //   return res.json();
    // },
    children: [
      {
        path: "dashboard",
        element: <Dashboard />,
        requiresAuth: true,
        roles: ["admin", "editor"],
        // loader: async () => {
        //   const res = await fetch("/api/dashboard-data");
        //   if (!res.ok) throw new Error("Failed to load dashboard data");
        //   return res.json();
        // },
      },
      {
        path: "/profile",
        element: <Profile/>,
        requiresAuth: true,
        roles: ['admin', 'editor', 'viewer'],
        // loader: async () => {
        //     const res = await fetch('/api/user-profile');
        //     if(!res.ok) throw new Error('Failed to load profile data');
        //     return res.json()
        // }
      },
      {
        path: "/settings",
        element: <Settings/>,
        requiresAuth: true,
        // loader: async () => {
        //     const res = await fetch("/api/settings");
        //     if(!res.ok) new Error("Failed to load settings data");
        //     return res.json();
        // }
      }

    ],
  },
  {
    path: "*",
    element: <NotFound />,
    requiresAuth: false
  }
];

export default routes;
